<template>
    <div>
        <DescribePanel :info="info" :editorwidth="800" :editorheight="500" :attributes="attributes" :events="events">
            <div id="tree">
                <Tree
                    :tree="tree"
                    @on-toggle-expand="handlerToggleExpand"
                    @on-double-click="handlerDoubleClick"
                    @on-toggle-checked="handlerToggleChecked"
                    @on-contex-menu="handlerContexMenu"
                ></Tree>
            </div>
        </DescribePanel>
    </div>
</template>

<script>
/* eslint-disable*/
import Tree from '../common/Tree/index'
import DescribePanel from './DescribePanel'

export default {
	components: {
		Tree,
		DescribePanel
	},
	data() {
		return {
			tree: [
				{
					id: 1,
					name: '一级',
					expand: true,
					checked: true,
					children: [
						{
							id: 2,
							name: '二级',
							checked: false,
							expand: true,
							children: [
								{
									id: 3,
									name: '三级',
									checked: false,
									children: [
										{
											id: 4,
											name: '四级',
											checked: false
										}
									]
								}
							]
						}
					]
				},
				{
					id: 1,
					name: '一级',
					expand: true,
					checked: true,
					children: [
						{
							id: 2,
							name: '二级',
							checked: false,
							expand: true,
							children: [
								{
									id: 3,
									name: '三级',
									checked: false,
									children: [
										{
											id: 4,
											name: '四级',
											checked: false
										}
									]
								}
							]
						}
					]
				}
			],
			info: {
				title: 'Tree 树形控件',
				des: '用清晰的层级结构展示信息，可展开或折叠。',
				editor: `\n<Tree :tree="tree"
                    @on-toggle-expand="handlerToggleExpand"
                    @on-double-click="handlerDoubleClick"
                    @on-toggle-checked="handlerToggleChecked"
                    @on-contex-menu="handlerContexMenu"></Tree>\n\n<script>\n  data() {\n     return {\n    tree:[
				{
					id: 1,
					name: '一级',
					expand: true,
					checked: true,
					children: [
						{
							id: 2,
							name: '二级',
							checked: false,
							expand: true,
							children: [
								{
									id: 3,
									name: '三级',
									checked: false,
									children: [
										{
											id: 4,
											name: '四级',
											checked: false
										}
									]
								}
							]
						}
					]
				},
				{
					id: 1,
					name: '一级',
					expand: true,
					checked: true,
					children: [
						{
							id: 2,
							name: '二级',
							checked: false,
							expand: true,
							children: [
								{
									id: 3,
									name: '三级',
									checked: false,
									children: [
										{
											id: 4,
											name: '四级',
											checked: false
										}
									]
								}
							]
						}
					]
				}
			],\n methods: {
		handlerToggleExpand(item) {
			item.expand = !item.expand
		},
		handlerToggleChecked(item) {},
		handlerDoubleClick(options) {},
		handlerContexMenu(options) {}
	} }\n}\n<script>`
			},
			attributes: [
				{
					param: 'tree',
					des: '绑定值',
					type: 'Array',
					selectvalue: '',
					defaultvalue: '[]'
				}
			],
			events: [
				{
					eventname: 'on-toggle-expand',
					des: '展开节点',
					param: '节点的信息'
				}
			]
		}
	},
	mounted() {},
	methods: {
		handlerToggleExpand(item) {
			item.expand = !item.expand
		},
		handlerToggleChecked(item) {},
		handlerDoubleClick(options) {},
		handlerContexMenu(options) {}
	}
}
</script>

 <style scoped>
#tree {
	width: 100%;
	height: 200px;
}
</style>
